<template>
    <div>
<!--        面包屑导航-->
        <bread-nav>
            <span slot="nav1">商品管理</span>
            <span slot="nav2">分类参数</span>
        </bread-nav>
<!--        卡片视图-->
        <el-card>
<!--            警告提示框-->
            <el-alert
                    show-icon
                    :closable="false"
                    title="注意，只能为第三级分类设置相关参数"
                    type="warning">
            </el-alert>
            <div class="select_cat">
                <span>选择商品分类</span>
<!--                级联选择器-->
                <el-cascader
                        v-model="selectedKeys"
                        :options="shopCateList"
                        :props="cascaderProps"
                        :clearable="true"
                        @change="handleChange">
                </el-cascader>
            </div>
<!--            配置参数面板切换-->
            <div class="add_params">
                <el-tabs v-model="activeName" @tab-click="handleClick">
<!--                    动态参数面板-->
                    <el-tab-pane label="动态参数" name="many">
                        <el-button type="primary" size="mini" class="add_params" @click="addManyParams"
                        :disabled="disabled">
                            添加参数
                        </el-button>
                        <el-table
                                :data="manyList"
                                stripe
                                border
                                style="width: 100%">
<!--                            扩展行-->
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-tag type="primary" v-for="(item,index) in scope.row.attr_vals"
                                    :key="index" :closable="true" @close="editAttr(index,scope.row)">{{item}}
                                    </el-tag>
                                    <el-input
                                            v-if="inputVisible"
                                            v-model="inputValue"
                                            ref="saveTagInput"
                                            size="small"
                                            style="margin-left: 1rem;width: 80px"
                                            @blur="handleInputConfirm(scope.row)">
                                    </el-input>
                                    <el-button v-else size="small" @click="showInput()"
                                               style="margin-left: 1rem">
                                        添加属性
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="#" type="index"></el-table-column>
                            <el-table-column
                                    prop="attr_name"
                                    label="参数名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column label="操作" >
                               <template slot-scope="scope">
                                   <el-button type="primary" icon="el-icon-edit" size="mini" @click="editParams">编辑</el-button>
                                   <el-button type="danger" icon="el-icon-delete" size="mini"
                                              @click="delVals(scope.row)" >删除</el-button>
                               </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
<!--                    静态参数面板-->
                    <el-tab-pane label="静态属性" name="only">
                        <el-button type="primary" size="mini" class="add_params" @click="addOnlyAttr"
                                   :disabled="disabled">
                            添加属性
                        </el-button>
                        <el-table
                                :data="onlyList"
                                stripe
                                border
                                style="width: 100%">
                            <el-table-column type="expand">
                                <template slot-scope="scope">
                                    <el-tag type="primary" v-for="(item,index) in scope.row.attr_vals"
                                            :key="index" :closable="true" @close="editAttr(index,scope.row)">{{item}}
                                    </el-tag>
                                    <el-input
                                            v-if="inputVisible"
                                            v-model="inputValue"
                                            ref="saveTagInput"
                                            size="small"
                                            style="margin-left: 1rem;width: 80px"
                                            @blur="handleInputConfirm(scope.row)">
                                    </el-input>
                                    <el-button v-else size="small" @click="showInput()"
                                               style="margin-left: 1rem">
                                        添加属性
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column label="#" type="index"></el-table-column>
                            <el-table-column
                                    prop="attr_name"
                                    label="参数名称"
                                    width="180">
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editParams">编辑</el-button>
                                    <el-button type="danger" icon="el-icon-delete" size="mini"
                                               @click="delVals(scope.row)" >删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-card>
<!--        添加参数和属性对话框-->
        <add-params-dia :message="manyParamsVisible" :active-name="activeName" :title="title[0]" />
        <add-params-dia :message="onlyParamsVisible" :active-name="activeName" :title="title[1]" />
    </div>
</template>

<script>
    import BreadNav from "../../components/content/BreadNav";
    import AddParamsDia from "./goodsComp/AddParamsDia";
    import {getShopCate} from "../../network/goods";
    import {getGoodsPam, addAttr, delAttr} from "../../network/goodsParams";

    export default {
        name: "CategoryParams",
        components:{
            BreadNav,
            AddParamsDia
        },
        data(){
            return{
                shopCategory: {
                    type:'',
                    pagenum:'',
                    pagesize:''
                },
                cascaderProps:{
                    value:'cat_id',
                    label:'cat_name',
                    children:'children',
                    expandTrigger: 'hover',
                },
                shopCateList:[],
                selectedKeys:[],
                activeName:'many',
                categoryId:'',
                manyList:[],
                onlyList:[],
                inputVisible:false,
                inputValue:'',
                manyParamsVisible:false,
                onlyParamsVisible:false,
                title:['动态参数','静态属性'],
                disabled:true,
            }
        },
        methods:{
            //获取商品分类数据
            getShopCateM(){
                getShopCate(this.shopCategory).then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.warning(res.data.meta.msg)
                    }
                    this.shopCateList = res.data.data
                })
            },
            //监听级联选择器事件
            handleChange(){
                // 获取选择的三级分类的Id
                if(this.selectedKeys.length !== 3){
                    this.$message.warning('请选择三级分类！');
                    this.disabled = true
                }else{
                    this.$store.dispatch('editA',this.selectedKeys[this.selectedKeys.length-1]);
                    this.categoryId = this.selectedKeys[this.selectedKeys.length-1];
                    this.disabled = false;
                    this.getGoodsPamM();
                }
            },
            //获取动态与静态参数的对应数据
            handleClick(){
                this.getGoodsPamM();
            },
            //获取对应的参数配置
            getGoodsPamM(){
                getGoodsPam(this.categoryId,this.activeName).then(res => {
                    if (res.data.meta.status !== 200){
                        this.$message.error('请选择商品分类！')
                    }else {
                        if (this.activeName === 'many'){
                            this.manyList = res.data.data;
                            this.manyList.forEach(item => {
                                item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(',') : [];
                            })
                        }else{
                            this.onlyList = res.data.data;
                            this.onlyList.forEach(item => {
                                item.attr_vals = item.attr_vals.length > 0 ? item.attr_vals.split(',') : [];
                            });
                        }
                    }
                })
            },
            //删除参数
            delVals(row){
                this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                        if(res === 'confirm'){
                            const data = {
                                cat_id:row.cat_id,
                                attr_id:row.attr_id
                            };
                            delAttr(data).then(res => {
                                if(res.data.meta.status !== 200){
                                    this.$message.error(res.data.meta.msg)
                                }
                                this.$message.success(res.data.meta.msg);
                                this.getGoodsPamM()
                            })
                        }
                }).catch(error => error)
            },
            //编辑参数
            editParams(){
                this.$message.success('太简单了，本人懒得做！')
            },
            //删除参数的属性
            editAttr(index,row){
                let attr_vals = row.attr_vals;
                if(index === 0){
                   attr_vals = ''
                }else{
                    attr_vals = row.attr_vals.splice(index,1).join(',');
                }
                const data = {
                    id:row.cat_id,
                    attrId:row.attr_id,
                    attr_name:row.attr_name,
                    attr_sel:row.attr_sel,
                    attr_vals:attr_vals
                };
                addAttr(data).then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.error(res.data.meta.msg)
                    }
                    this.$message.success(res.data.meta.msg);
                    this.getGoodsPamM()
                })
            },
            showInput(){
                this.inputVisible = true;
                //输入框自动聚焦
                this.$nextTick(() => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },
            //添加动态参数霍静态属性
            handleInputConfirm(row){
                this.inputVisible = false;
                if(this.inputValue !== ''){
                    row.attr_vals.push(this.inputValue)
                }else {
                    row.attr_vals.push()
                }
                const data = {
                    id:row.cat_id,
                    attrId:row.attr_id,
                    attr_name:row.attr_name,
                    attr_sel:this.activeName,
                    attr_vals:row.attr_vals.join(',')
                };
                addAttr(data).then(res => {
                    if(res.data.meta.status !== 200){
                        this.$message.warning(res.data.meta.msg)
                    }
                    this.$message.success(res.data.meta.msg)
                })
            },
            //监听动态参数对话框
            addManyParams(){
                this.manyParamsVisible = !this.manyParamsVisible
            },
            //监听静态属性对话框
            addOnlyAttr(){
                this.onlyParamsVisible = !this.onlyParamsVisible
            }
        },
        mounted() {
            this.getShopCateM()
        },
        created() {
            this.$bus.$on('addParamsDia',this.addManyParams);
            this.$bus.$on('getParamsData',this.getGoodsPamM);
            this.$bus.$on('addAttr',this.addOnlyAttr)
        }
    }
</script>

<style scoped lang="less">
    .select_cat{
        margin-top: 1rem;
        .el-cascader{
            margin-left: 1rem;
        }
    }
    .add_params{
        margin: 0.5rem 0;
    }
    .el-tag{
        margin-left: 1rem;
    }
</style>